<template>
    <div>
        <ul>
            <li v-for="(item,index) in msgList" :key="item.id">
                <!-- 第一种写法 -->
                <!-- <router-link to="/Home/Message/Detail?id=002&name=xfj">{{item.name}}</router-link> -->

                <!-- 第二种写法 -->
                <!-- <router-link :to="`/Home/Message/Detail?id=${item.id}&name=${item.name}`">{{item.name}}</router-link> -->

                <!-- 第三种写法 -->
                <router-link :to="{
                    path:'/Home/Message/Detail',
                    query:{
                        id:item.id,
                        name:item.name
                    }
                }">{{item.name}}</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name:'Message',
    data() {
        return {
            msgList:[
                {id:'001',name:'xfj'},
                {id:'002',name:'wh'},
                {id:'003',name:'cxk'}
            ]
        }
    },
}
</script>
<style scoped>
    a{
        text-decoration: none;
        color: black;
    }
</style>